<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
            overflow: auto;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="当前任务（10）" name="当前任务"></el-tab-pane>
            <el-tab-pane label="后续待办（2）" name="后续待办"></el-tab-pane>
            <el-tab-pane label="已完成（8）" name="已完成"></el-tab-pane>
        </el-tabs>
        <el-card class="box-card">
            <el-table
                    :data="tableData"
                    style="width: 100%" stripe @cell-click="toCommand">
                <el-table-column
                        prop="taskContent"
                        label="任务内容">
                </el-table-column>
                <el-table-column
                        prop="progress"
                        label="完成进度"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="tag"
                        label="状态"
                        width="200">
                    <template slot-scope="scope">
                        <el-tag
                                :type="scope.row.state === 0 ? 'danger' : 'success'"
                                close-transition size="mini">{{scope.row.tag}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="任务时间"
                        sortable
                        width="300"
                        :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
                        :filter-method="filterHandler"
                >
                </el-table-column>
            </el-table>
        </el-card>
        <div>&nbsp;</div>
        <div class="el-row">
            <el-button type="info" plain size="small" style="float: right;border: none;margin-right: 20px;"><b>共8行</b>
            </el-button>
        </div>
    </div>
</div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    window.onload = function () {
        app.abc();
    }
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                activeName: '当前任务',
                currentTask: 'first',
                tableData: [],
                searchTab: '',
            }
        },
        methods: {
            edit: function () {
                window.parent.document.getElementById("mainframe").setAttribute('src', 'edit_task.html')
            },
            abc: function () {
                this.tableData = [{
                    date: '02-01 12:20 ~ 02-13 15:25',
                    taskContent: '给客户打电话',
                    progress: '0%',
                    tag: '已逾期',
                    state: 0
                }, {
                    date: '2016-05-04',
                    taskContent: '第一步：【邀请同事加入吧】进入手机端，点击“我的”进入“邀请同事”或者在PC版（www.fabayaya.com），点击左下角齿轮图标',
                    progress: '20%',
                    tag: '待处理',
                    state: 1
                }, {
                    date: '02-01 12:20 ~ 02-13 15:25',
                    taskContent: '第一步：【邀请同事加入吧】进入手机端，点击“我的”进入“邀请同事”或者在PC版（www.fabayaya.com），点击左下角齿轮图标',
                    progress: '50%',
                    tag: '已逾期',
                    state: 0
                }, {
                    date: '2016-05-03',
                    taskContent: '第一步：【邀请同事加入吧】进入手机端，点击“我的”进入“邀请同事”或者在PC版（www.fabayaya.com），点击左下角齿轮图标',
                    progress: '0%',
                    tag: '待处理',
                    state: 1
                }, {
                    date: '2016-05-03',
                    taskContent: '第一步：【邀请同事加入吧】进入手机端，点击“我的”进入“邀请同事”或者在PC版（www.fabayaya.com），点击左下角齿轮图标',
                    progress: '0%',
                    tag: '待处理',
                    state: 1
                }]
            },
            formatter: function (row, column) {
                return row.address;
            },
            filterTag: function (value, row) {
                return row.tag === value;
            },
            filterHandler: function (value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            handleClick: function (tab, event) {
                this.searchTab = tab.name;
                this.tableData = [{
                    date: '02-01 12:20 ~ 02-13 15:25',
                    taskContent: '给客户打电话',
                    progress: '100%',
                    tag: '已完成',
                    state: 2
                }, {
                    date: '02-01 12:20 ~ 02-13 15:25',
                    taskContent: '给客户打电话',
                    progress: '100%',
                    tag: '已完成',
                    state: 2
                }, {
                    date: '02-01 12:20 ~ 02-13 15:25',
                    taskContent: '给客户打电话',
                    progress: '100%',
                    tag: '已完成',
                    state: 2
                }]
            },
            toCommand: function (row, column, cell, event) {
                window.parent.document.getElementById("mainframe").setAttribute('src', 'command_detail.html');
            }
        }

    })
</script>
</body>
</html>
